<template>
  <div id="file-resource-container">
      <h1>资源库</h1>
      <div class="recently-note">
<!--        资源库题目搜索区域-->
        <div class="recently-note-header">
          <div class="recently-note-header-title">最近更新</div>
          <div class="recently-note-header-right">
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            <el-input  placeholder="输入关键词搜索" v-model="keyword" @change="search"></el-input>
            <div class="block">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                align="right"
                @change="search"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
            <el-select v-model="categoryId" @change="search" placeholder="请选择文章类型">
              <el-option v-for="category in categoryList" :key="category.categoryId" :label="category.name" :value="category" ></el-option>
            </el-select>
          </div>
        </div>
<!--        资源库 表格区域-->
        <div class="recently-note-content" @mouseleave="noteItemIndex = -1">
          <div class="recently-note-th">
            <svg width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="larkui-icon larkui-icon-doc-type-default icon-svg index-module_icon_X+ssG index-module_size_wVASz" data-name="DocTypeDefault" style="width: 24px; min-width: 24px; height: 24px;"></svg>
            <div class="recently-note-item-title" >标题</div>
            <div class="recently-note-item-category" >分类名称</div>
            <div class="recently-note-item-update-time" >更新时间</div>
            <div slot="reference" class="recently-note-item-operate">操作</div>
          </div>
          <div v-for="(note,index) in noteList" :key="note.noteId"  @mouseenter="noteItemIndex = index" class="recently-note-item"  >
            <svg width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="larkui-icon larkui-icon-doc-type-default icon-svg index-module_icon_X+ssG index-module_size_wVASz" data-name="DocTypeDefault" style="width: 24px; min-width: 24px; height: 24px;"><g fill="none" fill-rule="evenodd"><path d="M4.75 1.267h10.5a2 2 0 0 1 2 2v13.5a2 2 0 0 1-2 2H4.75a2 2 0 0 1-2-2v-13.5a2 2 0 0 1 2-2Z" stroke="#3471AF" fill="#FFF"></path><path d="M6.3 4.5h7.4a.8.8 0 0 1 .8.8v1.9a.8.8 0 0 1-.8.8H6.3a.8.8 0 0 1-.8-.8V5.3a.8.8 0 0 1 .8-.8Z" fill="#3B8EE3"></path><path d="M14 10.75a.5.5 0 0 1 .09.992l-.09.008H6a.5.5 0 0 1-.09-.992L6 10.75h8Zm-3 3a.5.5 0 0 1 .09.992l-.09.008H6a.5.5 0 0 1-.09-.992L6 13.75h5Z" fill="#9DC6F1" fill-rule="nonzero"></path></g></svg>
            <div class="recently-note-item-title" @click="toNoteDetail(note.noteId)">{{note.title}}</div>
            <div class="recently-note-item-category" @click="toNoteDetail(note.noteId)">{{note.categoryName}}</div>
            <div class="recently-note-item-update-time" @click="toNoteDetail(note.noteId)">{{note.updatedTime}}</div>
            <el-popover
              placement="right"
              class="recently-operate-box"
              width="100"
              trigger="click">
              <div class="recently-note-item-operate-list">
                  <div class="recently-note-item-operate-list-item">
                    <img src="../../assets/img/collect.png" alt="" class="collect-img">
                    <span @click="collectionFile(note)">收藏</span>
                  </div>
                  <div class="recently-note-item-operate-list-item">
                    <img src="../../assets/img/editor.png" alt="">
                    <span @click="editorFile(note)">编辑</span>
                  </div>
                  <div class="recently-note-item-operate-list-item">
                    <img src="../../assets/img/delete.png" alt="">
                    <span @click="deleteFile(note)">删除</span>
                  </div>
              </div>
              <div slot="reference" class="recently-note-item-operate">...</div>
            </el-popover>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
export default {
  name: "fileResource",
  data() {
    return {
      user: sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : null,
      keyword:'',
      noteList:[],
      noteItemIndex: -1,
      categoryId:null,
      categoryList:[],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      dateRange: '',
    };
  },
  methods:{
    collectionFile(note){
      this.$request.get('/note/collection',{
        noteId: note.noteId
      }).then(res => {
        if(res.data.code === 200){
          this.$messageHelper.messageSuccess('收藏成功');
        }else{
          this.$messageHelper.messageWarning(res.data.msg);
        }
      })
    },
    editorFile(note){
      this.$currentNote.noteId = note.noteId;
      this.$router.push('/index/NoteEditor');
    },
    deleteFile(note){
      this.$request.post('/user/delete',{
        userId: this.user.userId,
        noteId: note.noteId,
      }).then(res => {
        if(res.data.code === 200){
          this.$messageHelper.messageSuccess('删除成功');
          this.getNoteList();
        }else{
          this.$messageHelper.messageWarning(res.data.msg);
        }
      })
    },
    search(){
      let date = this.dateRange ? this.dateRange[0] : null;
      let startTime = date ? date.toISOString().substring(0, 19).replace('T', ' ') : null;
      date = this.dateRange ? this.dateRange[1] : null;
      let endTime = date ? date.toISOString().substring(0, 19).replace('T', ' ') : null;
      console.log(startTime,endTime)

      this.$request.post('/note/search',{
        userId:this.user.userId,
        keyword: this.keyword,
        categoryId: this.categoryId ? this.categoryId.categoryId : null,
        startTime,
        endTime,
      }).then(res => {
        if(res.data.code === 200){
          res.data.data ? this.noteList = res.data.data.noteList : [];
          this.noteList.forEach(item => {
            let date = new Date(item.updatedTime);
            item.updatedTime = date.getFullYear() + '-' + (date.getMonth()+1).toString().padStart(2, '0') + '-' + date.getDate().toString().padStart(2, '0');
          })
        }else{
          this.$messageHelper.messageWarning(res.data.msg);
        }
      })
    },
    toNoteDetail(noteId){
      this.$currentNote.noteId = noteId;
      this.$router.push('/index/NoteEditor');
    },
    getNoteList(){
      this.$request.get('/note/listByUserId?userId='+this.user.userId).then(res => {
        if(res.data.code === 200){
          res.data.data ? this.noteList = res.data.data.noteList.list : [];
          this.noteList.forEach(item => {
            let date = new Date(item.updatedTime);
            item.updatedTime = date.getFullYear() + '-' + (date.getMonth()+1).toString().padStart(2, '0') + '-' + date.getDate().toString().padStart(2, '0');
          })
        }else{
          this.$messageHelper.messageWarning(res.data.msg);
        }
      })
    },

    getCategoryList(){
      this.$request.get('/category/list').then(res => {
        if(res.data.code === 200){
          res.data.data ? this.categoryList = res.data.data.categoryList.list : [];
        }else{
          this.$messageHelper.messageWarning(res.data.msg);
        }
      })
    },
    getDimQuery(){

    }
  },
  mounted() {
    this.getNoteList();
    this.getCategoryList();
  }
};
</script>
<style lang="less" scoped>
#file-resource-container{
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  h1{
    text-align: left;
    font-size: 36px;
  }
  .recently-note {
    margin-top: 20px;
    width: 100%;
    height: 100%;

    .recently-note-header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 20px;

      .recently-note-header-right {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 10px;

        .el-input {
          width: 180px;
        }

        .el-select {
          width: 155px;
          //min-width: 155px;
        }
      }
    }

    .recently-note-content {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .recently-note-th {
        position: relative;
        width: 100%;
        height: 80px;
        position: relative;
        border-radius: 8px;
        border-bottom: 1px solid #eee;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 10px;
        text-align: left;
        font-size: 18px;
        font-weight: bold;

        .recently-note-item-title {
          flex: 3;
          //文字溢出省略
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .recently-note-item-category {
          text-align: center;
          flex: 2;
        }

        .recently-note-item-update-time {
          text-align: center;
          flex: 2;
        }

        .recently-note-item-operate {
          position: absolute;
          right: 20px;
          top: 50%;
          transform: translateY(-50%);

          &:hover {
            cursor: pointer;
          }
        }
      }

      .recently-note-item {
        position: relative;
        width: 100%;
        height: 80px;
        position: relative;
        border-radius: 8px;
        border-bottom: 1px solid #eee;
        display: flex;
        font-size: 16px;
        flex-direction: row;
        align-items: center;
        padding: 10px;

        &:hover {
          background: #f5f5f5;
        }

        img {
          width: 40px;
          height: 40px;
          object-fit: cover;
        }

        .recently-note-item-title {
          flex: 3;
          text-align: left;
          font-size: 18px;
          padding-left: 10px;
          font-weight: bold;

          //文字溢出省略
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .recently-note-item-category {
          flex: 2;
          color: #999;
        }

        .recently-note-item-update-time {
          flex: 2;
          font-size: 14px;
          color: #999;
        }

        .recently-operate-box {
          position: absolute;
          right: 20px;
          top: 50%;
          transform: translateY(-50%);

          .recently-note-item-operate {
            &:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
.el-popover{
  .recently-note-item-operate-list{
    display: flex;
    flex-direction: column;
    .recently-note-item-operate-list-item{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 30px;
      padding: 0 20px;
      &:hover {
        background: #f5f5f5;
        cursor: pointer;
      }
      img{
        width: 20px;
        height: 20px;
        object-fit: cover;
        margin-right: 10px;
      }
      .collect-img{
        width: 18px;
        height: 18px;
        object-fit: cover;
      }
      span{
        font-size: 14px;
      }
    }
  }
}
}
</style>
